Web Components
Este código utiliza uma tecnologia poderosa chamada Web Components. A ideia principal é criar suas próprias "tags" HTML personalizadas (como < site-header > e < site-footer >) que podem ser reutilizadas em qualquer página do seu site sem precisar copiar e colar todo o HTML e CSS várias vezes.
1. Criando o Cabeçalho (SiteHeader)
A classe SiteHeader estende HTMLElement, o que diz ao navegador que este objeto deve se comportar como um elemento HTML comum.
• connectedCallback(): Este é um "ciclo de vida". Ele é executado automaticamente assim que o navegador coloca o elemento na página.
• this.innerHTML: Aqui, você define o conteúdo visual. Note que este componente é "aberto", ou seja, o CSS global da sua página pode afetar o estilo deste header.
2. Criando o Rodapé (SiteFooter) - A Diferença do Shadow DOM
Este componente é um pouco mais avançado porque utiliza o Shadow DOM.
• constructor() e attachShadow: Ao usar this.attachShadow({ mode: "open" }), você cria um "DOM encapsulado".
o Vantagem: O estilo CSS dentro deste componente não vaza para fora, e o CSS de fora (global) não bagunça o que está dentro do rodapé. É uma cápsula protegida.
• Importação de CSS: Dentro do template, há um < link rel="stylesheet" href="./stylefooter.css" >. Como ele está dentro do Shadow DOM, esse arquivo CSS só afetará o rodapé.
3. Registro dos Elementos
As linhas finais são essenciais para o navegador entender as novas tags:
JavaScript
customElements.define("site-header", SiteHeader);
customElements.define("site-footer", SiteFooter);
Isso mapeia o nome da tag para a classe correspondente. Regra importante: nomes de Web Components devem obrigatoriamente ter um hífen (-).
Como usar no HTML?
Depois de importar esse script no seu arquivo HTML, você o utiliza de forma muito simples e limpa:
Resumo das Vantagens
1. Manutenibilidade: Se você precisar mudar o texto do rodapé, muda em apenas um arquivo JS e reflete em todo o site.
2. Organização: O HTML principal fica muito mais curto e legível.
3. Encapsulamento: O uso do Shadow DOM no footer evita conflitos de nomes de classes CSS.